<template>
  <div class="container">
    <Modal v-model="addSubject" title="添加目录" @on-ok="addOk" @on-cancel="addCancel" :footer-hide="true" :closable="false" :mask-closable="false">
      <Form :model="formItem" :label-width="80" :rules="ruleValidate" ref="ruleForm">
        <FormItem label="所属学科" prop='subjectID'>
          <el-select placeholder="请选择" style="width: 100%" @focus="polymerScience" v-model="formItem.subjectID">
            <el-option v-for="item in science" :key="item.value" :label="item.label" :value="item" />
          </el-select>
        </FormItem>
        <FormItem label="目录名称" prop="directoryName">
          <Input v-model="formItem.directoryName" placeholder="请添加目录名称"></Input>
        </FormItem>
      </Form>
      <Row type="flex" justify="end">
        <Button @click="addCancel">取消</Button>
        <Button type="primary" @click="addOk" style="margin-left: 15px">确定</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  props: {
    addSubject: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formItem: {
        subjectID: '',
        directoryName: ''
      },
      ruleValidate: {
        subjectID: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '学科不能为空', trigger: 'blur' }
        ]
      },
      science: [],
      itemList: {}
    }
  },
  methods: {
    // 点击确定
    async addOk () {
      try {
        this.$refs.ruleForm.validate()
        this.itemList.subjectID = this.formItem.subjectID.value
        this.itemList.directoryName = this.formItem.directoryName
        console.log(this.itemList)
        await add(this.itemList)
        this.$Message.success('添加成功')
        this.$parent.getRoleList()
        this.$refs.ruleForm.resetFields()
        this.$emit('update:addSubject', false)
      } catch (error) {
        console.log(error)
      }
    },
    // 点击取消
    addCancel () {
      this.$refs.ruleForm.resetFields()
      this.$emit('update:addSubject', false)
    },
    async polymerScience () {
      const { data } = await simple()
      this.science = data
      console.log(this.science)
    }
  }
}
</script>

<style scoped lang='less'></style>
